<template>
	<view :style="{'--color':color}" class="p-bot160">
		<status-bar title='详情'></status-bar>

		<view class="row f-nowrap bgwhite padding30 m-bot20">
			<view class="headImg bor_radius m-right20">
				<image :src="imgUrl+info.fqheadimg" mode="aspectFill" class="wh bor_radius"></image>
			</view>
			<view class="flex-1 f-column">
				<view class="row color_16 size28 bold">{{info.fqName}}</view>
				<text class="color_99 h6 m-top10 d-block">{{info.addTime}}</text>
				<view class="color_16 size32 m-top16">{{info.file_content}}</view>
				<scroll-view scroll-x="true" class="row nowrap listImg" v-if="info.fileImgArr && info.fileImgArr.length">
					<block v-for="(subItem,subIndex) in info.fileImgArr" :key="subIndex">
						<image :src="imgUrl+subItem" mode="aspectFill" class="listImg_li bor_radius_10" @click="$ImageNum(subIndex,info.fileImgArr)"></image>
					</block>
				</scroll-view>
			</view>
		</view>

		<block v-if="info.reply && info.reply.length">
			<view class="row bgwhite padding30 m-top20">
				<view class="color_16 size30 bold">全部回复</view>
			</view>
			
			<view class="row bgwhite f-nowrap padding50-30 bot_bor" v-for="(item,index) in info.reply" :key="index">
				<view class="headImg bor_radius m-right20">
					<image :src="imgUrl+item.fq_headimg" mode="aspectFill" class="wh bor_radius"></image>
				</view>
				<view class="flex-1 f-column">
					<view class="row color_16 size28 bold">{{item.fq_name}}</view>
					<text class="color_99 h6 m-top10 d-block">{{item.addtime}}</text>
					<view class="color_66 size32 m-top16 " @click.stop="replyOne(item)">{{item.review_content}}</view>
					
					<view class="row bgF5 padding14 bor_radius_6 m-top20" v-for="(sItem,sIndex) in item.reply" :key="sIndex"
						v-show="item.reply && item.reply.length">
						<view class="rows">
							<view class="color_33 size28 m-right10 d-inline-block" v-if="sItem.by_fqvid == item.fqvid"> 
								{{sItem.fq_name}}
							</view>
							<view class="color_33 size28 m-right10 d-inline-block" v-else>{{sItem.fq_name}} 
								<text class="color size26 m-left10 m-right10">回复</text> 
								{{sItem.bfq_name}}
							</view>
							<text class="color_99 size26" @click.stop="replyOne(sItem)">{{sItem.review_content}}</text>
						</view>
						<text class="color_99 h6 m-top10 d-block">{{sItem.addtime}}</text>
					</view>
				</view>
			</view>
		</block>
		
		<emptys v-else></emptys>
		
		<view class="footer">
			<view class="row p-left30 p-right30 a-center m-top20">
				<view class="flex-1 d-flex a-center fotInput">
					<view class="iconfont icon-pinglun color_99 size30"></view>
					<input type="text" class="flex-1 ccolor_336 height m-left20" 
						v-model="commont" confirm-type="发送" @confirm="confirmBtn" placeholder="我来说两句">
				</view>
				<view class="d-flex f-column a-center m-left50" @click="zanFileId">
					<view class="iconfont icon-dianzan size40" :class="info.zanok=='1'?'color':'color_33'"></view>
					<text class="h6" :class="info.zanok=='1'?'color':'color_33'">{{info.zanCount}}</text>
				</view>
			</view>
		</view>
		
		<view class="maskings d-flex a-end" v-if="reply">
			<view class="row bgwhite p-top40 p-left30 p-right30 p-bot60">
				<view class="row a-center j-sb">
					<text class="color_16 size30 bold">回复 {{replyname}}</text>
					<view class="iconfont icon-guanbi1 color_16 size30 bold" @click.stop="reply = false"></view>
				</view>
				<textarea class="textarea m-top30 size26 color_16" 
				    v-model="commont" :maxlength="-1" placeholder="请在此输入文字~"></textarea>
				<view class="row subBtn bgcolor flexac white size36 bold m-top30" @click="confirmBtn">确定</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				imgUrl:this.imgUrl,
				reply:false,
				file_id:'',
				info:'',
				commont:'',
				replyname:'',
				review_id:'',
				fqvid:'',
			}
		},
		onLoad(option) {
			if (option.file_id) this.file_id = option.file_id;	
		    this.details();
		},

		methods: {
			details() {
				this.$http.post({
					url: '/communityApi/details',
					data: {
						file_id: this.file_id
					}
				}).then(res => {
					if (res.code != '100') return this.$Toast(res.msg);
					this.info = res.data;
				})
			},
		
			confirmBtn() {
				if (!this.commont) return this.$Toast('内容不能为空!');
				this.$http.post({
					url: '/communityApi/commentFileId',
					data: {
						review_content: this.commont,
						file_id: this.info.file_id,
						by_review_id: this.review_id,
						by_fqvid: this.fqvid,
					}
				}).then(res => {
					if (!res.success) return this.$Toast(res.msg);
					this.commont = '';
					this.reply = false;
					this.$Toast(res.msg);
					this.details();
				})
			},
			
			//  回复一级
			replyOne(item){
				this.replyname = item.fq_name;
				this.review_id = item.review_id;
				this.fqvid = item.fqvid;
				this.reply = true;
			},
			
			zanFileId(){
				this.$http.post({
					url: '/communityApi/zanFileId',
					data: {
						file_id: this.file_id,
						type:this.info.zanok=='0'?'1':'0'
					}
				}).then(res => {
					if (res.code != '100') return this.$Toast(res.msg);
					// this.info.zanok=='0'?this.info.zanok = '1':this.info.zanok = 0
					this.details();
				})
			}
			
		},
		computed: {
			...mapState(['color', 'vid']),
		},
		
		onShareAppMessage() {
			let imgs = this.info.fileImgArr.length?this.imgUrl+this.info.fileImgArr[0]:this.info.fqheadimg
			return {
				title: this.info.uname,
				desc: this.info.file_content,
				path:`/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: imgs
			}
		},
		
		onShareTimeline(){
			let imgs = this.info.fileImgArr.length?this.imgUrl+this.info.fileImgArr[0]:this.info.fqheadimg
			return {
				title: this.info.file_content,
				query: {share_v_id: this.vid},
				imageUrl: imgs
			}
		},
	}
</script>

<style lang="scss" scoped>
	.headImg {
		width: 72rpx;
		height: 72rpx;
		border: 2px solid var(--color);
	}

	.listImg {
		width: 600rpx;
		height: 190rpx;
		margin-top: 26rpx;
	}

	.listImg_li {
		width: 188rpx;
		height: 188rpx;
		margin-right: 18rpx;
	}

	.listImg_li:last-child {
		margin-right: 0;
	}
	.footer{
		width:100%;
		height: 140rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left:0;
		z-index:8;
	}
	.fotInput{
		background: #f6f6f6;
		height: 64rpx;
		border-radius: 40rpx;
		padding: 0 30rpx;
	}
	.textarea{
		width:100%;
		height: 300rpx;
		padding: 30rpx 20rpx;
		background: #F2F2F2;
		border-radius: 20rpx;
	}
	.subBtn{
		height: 98rpx;
		border-radius: 48rpx;
	}
</style>
